<template>
	<!-- 百科子组件 -->
	<view class="">
		<!-- 这里原先使用<view>标签 -->
		<ul class="list-sort-bar posts-sort tabLength">
			<li  style="list-style:none" @click="setTabBar(index,item)" v-for="(item,index) in tabName">
				<button :class="['sort-button',{selected:item.bool}]">{{item.name}}</button>
			</li>
		</ul>
	</view>
</template>
<script setup lang="ts">
	// import {defineProps} from 'vue'
	// interface Props{
	// 	tabName:any[]
	// }
	// const props = defineProps<Props>(
	
	// )
	// function setTabBar(key: any) {
	// 	for (let i = 0; i < props.tabName.length; i++) {
	// 		props.tabName[i].bool = false
	// 		if (i == key) {
	// 			props.tabName[key].bool = true
	// 			// props.changeIndex(key)
	// 		}
	// 	}
	// }
	import {defineProps} from 'vue'
	const props = defineProps({
		changeIndex:{
			type:Function,
			default:()=>{}
		},
		tabName:{
			type:Array
		}
	})
	function setTabBar(key: any ,item:any) {
		let arr = JSON.parse(JSON.stringify(props.tabName))
		for (let i = 0; i < arr.length; i++) {
			arr[i].bool = false
			if (i == key) {
				arr[key].bool = true
				props.changeIndex(key,item)
			}
		}
	}
</script>